// 创建模板
<template>
    <div>
        <h1>Demo页面</h1>
        <h2>计算属性</h2>
        <p>{{count}}</p>
        <h2>过滤器的功能大可不必使用，可以用计算属性实现</h2>
    </div>
</template>
<script>
export default {
    data(){
        return{
        }
    },
    computed:{
        count(){
            var num =5.56519
            // 保留小数后两位 后一位过5取整
            var res =num.toFixed(2)
            // 返回的值在模板可以直接调用方法取值
            return res
        }
    },
    methods() {
        // vue给我们提供一个操作dom的属性ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用
    },
}
</script>
// 添加了scoped的组件只作用于当前组件 使组件之间互不污染
<style scoped>
    h1,h2,p{
        text-align: center;
    }
</style>